<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_CSS3D-rotate</title>
  <!-- 
  CSS3 的 3D 旋转（3D Rotate）是通过  `transform`  属性实现的一种效果，它允许开发者在三维空间中对元素进行旋转。使用 3D 旋转可以创建更具立体感和动态效果的网页设计。
  1. 基本概念
  - 3D 变换：CSS3 提供了一系列的 3D 变换功能，包括旋转、平移、缩放等。3D 旋转是其中一种，可以使元素在三维空间中围绕 X、Y 或 Z 轴旋转。
  - 透视效果：为了实现 3D 效果，通常需要设置一个透视（perspective）属性，以便在观察元素时能够感受到深度。

  2. 关键属性
  -  `transform` ：用于定义元素的变换效果，包括旋转、平移、缩放等。
  -  `perspective` ：定义观察者与 z=0 平面的距离，影响 3D 变换的深度感。值越小，3D 效果越明显。
  -  `perspective-origin` ：定义透视的起点，影响元素的透视效果。

  3. 旋转函数
  -  `rotateX(angle)` ：围绕 X 轴旋转指定的角度。
  -  `rotateY(angle)` ：围绕 Y 轴旋转指定的角度。
  -  `rotateZ(angle)` ：围绕 Z 轴旋转指定的角度（与 2D 旋转相同）。

  4. 使用示例
  以下是一个简单的示例，展示如何使用 CSS3 进行 3D 旋转：
  .container {
    perspective: 1000px; /* 设置透视 */
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform-style: preserve-3d; /* 允许子元素进行 3D 变换 */
    transition: transform 0.5s; /* 添加过渡效果 */
  }

  .box:hover {
    transform: rotateY(180deg); /* 鼠标悬停时围绕 Y 轴旋转 */
  }
  5. 注意事项
  - 浏览器兼容性：确保在不同浏览器中测试 3D 变换的效果，因为某些旧版本的浏览器可能不完全支持 CSS3 3D 变换。
  - 性能问题：使用 3D 变换可能会影响性能，特别是在移动设备上。因此，建议在复杂场景中谨慎使用。

  6. 总结
  CSS3 的 3D 旋转功能为网页设计带来了更多的可能性。通过设置透视和使用旋转函数，开发者可以创建动态的、立体的视觉效果，增强用户体验。掌握这些基本概念和属性的使用，可以帮助开发者实现更具吸引力的网页设计。
  -->
  <style>
    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box-z {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      /* 形变 */
      /* transform: rotateZ(45deg); */

      /* 简写 */
      /* transform: rotate(45deg); */
      transform: rotate3d(0, 0, 1, 45deg);
    }

    .box-xy {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      /* transform: rotateX(45deg); */
      transform: rotateX(-33.5deg) rotateY(45deg);
    }
  </style>
</head>
<body>

  <h3>1. rotateZ</h3>
  <div class="box-z">rotate-z</div>

  <h3>2. rotate-xy</h3>
  <div class="box-xy">rotate-xy</div>
  
</body>
</html>